<template>
  <div>
    <el-header style="line-height:60px"><h2>课程列表信息</h2></el-header>
    <el-row>
      <el-col :span="24">
        <div id="maintable">
          <p class="title"><i class="el-icon-tickets"></i>最新100+条信息</p>
          <el-table
            border
	            data="tableDate"
	            v-loading="loading"
            style="width: 100%">

            <el-table-column
              prop="singlechoice_id"
              label="序号"
              sortable
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="lesson_id"
              label="课程ID"
              width="100">
            </el-table-column>
            <el-table-column
              prop="lesson"
              label="课程名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="info"
              label="课程说明"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="课程其他备注信息"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="is_del"
              label="可用状态(是否删除)"
              width="180"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  slot="reference"
                  @click="handleDelete(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
	<el-dialog title="课程详情" :visible.sync="dialogFormVisible">
	<el-form ref="form" :model="form"
	                    label-width="180px"
	                    @submit.native.prevent
	                    action="#">
	  <el-form-item label="课程ID:">
	    <el-input v-model="form.lesson_id"></el-input>
	  </el-form-item>
	  <el-form-item label="课程号ID：">
	    <el-input v-model="form.lesson_code"></el-input>
	  </el-form-item>
	  <el-form-item label="课程名称：">
	    <el-input v-model="form.lesson"></el-input>
	  </el-form-item>
	  <el-form-item label="课程说明：">
	    <el-input v-model="form.info"></el-input>
	  </el-form-item>
	  <el-form-item label="课程其他备注信息：">
	    <el-input v-model="form.remark"></el-input>
	  </el-form-item>
	  <el-form-item label="课程可用状态(是否删除)：">
	    <el-input v-model="form.is_del"></el-input>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="button" @click="onSubmit()">立即增加</el-button>
	    <el-button>取消</el-button>
	  </el-form-item>
	</el-form>
    <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'lesson1',
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: [],
      formLabelWidth: '120px',
      loading: true,
      visible: false
    }
  },
  methods: {
    handleEdit (index, row) {
      this.form = row
      console.log(this.form)
      this.dialogFormVisible = true
    },
    handleDelete (index, row) {
      this.$confirm('确认删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.singlechoice_id)
        return this.$http.put('/api/lessondel', row.singlechoice_id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败！'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    console.log(this.$store.state.token)
    this.$http.get('/api/singlechoicelistall')
      .then(response => {
        this.tableData = response.data.data
        this.loading = false
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style lang="scss">
  %shadow{
    background: #fff;
    -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
  }
  #maintable{
    @extend %shadow;
  }

</style>
